<template>
  <div class="box">
    <div class="box-content">
      <!-- 首页 -->
      <div class="home-nav" @click="toHome">智库首页</div>
      <!-- 中间部分 -->
      <div class="nav-list">
        <div
          class="nav"
          :key="index"
          v-for="(item, index) of data.titles"
          :class="{active: hIndex === index}"
          @click="onNavChange(index)"
          v-show="item.topMenu"
        >
          {{ item.name }}
        </div>
      </div>
      <!-- 报名按钮 -->
      <div class="apply-btn" @click="onApply">立即报名</div>
    </div>
    <!-- 报名弹窗 -->
    <ColumnApply :data="applyData" v-if="applyData.bSwitch" />
  </div>
</template>

<script>
import ColumnApply from '@/components/ColumnApply'
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {
          titles: []
        }
      }
    },
    hIndex: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  components: {
    ColumnApply
  },
  data() {
    return {
      applyData: {
        bSwitch: false,
        imgUrl: '',
        linkUrl: ''
      }
    }
  },
  created() {
    const { bmUrl, bmImgUrl } = this.data
    this.applyData.imgUrl = bmImgUrl
    this.applyData.linkUrl = bmUrl
  },
  methods: {
    // 首页
    toHome() {
      this.$router.push({ name: 'Home' })
    },
    // title切换
    onNavChange(index) {
      this.hIndex = index
      this.$emit('nav', index)
    },
    // 报名
    onApply() {
      const { imgUrl, linkUrl } = this.applyData
      // 显示弹窗
      if ( imgUrl && !linkUrl) {
        this.applyData.imgUrl = imgUrl
        this.applyData.bSwitch = true
      } else if (!imgUrl && linkUrl) {
        // 打开报名链接
        window.open(linkUrl, '_blank')
      } else if(imgUrl && linkUrl) {
        // 两个都存在时，打开链接
        window.open(linkUrl, '_blank')
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  background: rgba($color: #09153D, $alpha: 0.65);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  .box-content {
    width: 1180px;
    height: 76px;
    margin: 0 auto;
    .home-nav {
      font-size: 24px;
      float: left;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #fff;
      line-height: 76px;
      cursor: pointer;
      margin-right: 23px;
    }
    .nav-list {
      overflow: hidden;
      float: left;
      padding-top: 18px;
      .nav {
        height: 58px;
        line-height: 58px;
        float: left;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #fff;
        line-height: 40px;
        cursor: pointer;
        padding: 0 14px;
        margin-right: 13px;
        &:hover {
          color: #CD2831;
        }
        &.active {
          color: #CD2831;
          font-weight: bold;
          position: relative;
          &::after {
            width: 100%;
            height: 3px;
            background: #CD2831;
            position: absolute;
            bottom: 0px;
            left: 0;
            content: '';
          }
        }
      }
    }
    .apply-btn {
      margin-top: 18px;
      height: 40px;
      float: right;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #fff;
      line-height: 40px;
      cursor: pointer;
      background: #CD2831;
      padding: 0 15px;
      border-radius: 4px;
    }
  }
}
</style>